<template>
	<view class="content">
		
<!-- 		
		<uni-card  >
			预约余额:{{num}}人
		</uni-card>
		 -->
		
		<view class="input-group">
			<view class="input-row border">
				<text class="title">手机号：</text>
				
				<m-input type="text" focus clearable v-model="phone1" placeholder="请输入手机号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">姓名：</text>
				<m-input type="text" focus clearable v-model="userName1" placeholder="请输入姓名"></m-input>
			</view>
			     <view class="uni-list">
			            <view class="uni-list-cell">
			                <view class="uni-list-cell-left">
			                    预约日期：
			                </view>
			                <view class="uni-list-cell-db">
			                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			                        <view class="uni-input">{{date}}</view>
			                    </picker>
			                </view>
			            </view>
			        </view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								地区选择：
							</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array1">
									<view class="uni-input">{{array1[index]}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								机构选择：
							</view>
							<view class="uni-list-cell-db">
								<picker @change="bindStoreChange" :value="store" :range="array2">
									<view class="uni-input">{{array2[store]}}</view>
								</picker>
							</view>
						</view>
					</view>
		</view>
		
		
		<view class="btn-row">
			<button type="primary" class="primary" @tap="updata">预约申请</button>
		</view>
	</view>
</template>

<script>
	
	import mInput from '../../components/m-input.vue';
	import uniCard from '@/components/uni-card/uni-card.vue';
	export default {
		components: {
			mInput,
			uniCard
		},
		data() {
			 const currentDate = this.getDate({
						format: true
					})
			return {
				phone1:'',
				userName1:'',
				uid:uni.getStorageSync('setUserData').id,
				num:0,
			  date: currentDate,
			  index:0,
			 array1: ['惠州', '广州', '中山', '佛山'],
			 array2: ['德国莱茵检测中心', '中国检验认证', '广东精测检测中心', '华测检测','必维国际检测集团'],
			 store:0
			}
		},
		//页面加载前给初始参数赋值，不能直接使用缓存参数
		onLoad() {
			this.phone1 = uni.getStorageSync('setUserData').phone;
			this.userName1 = uni.getStorageSync('setUserData').name;
			uni.request({
				url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
				method: 'GET',
				data: {
					act:'order',
					look:1
				},
				success: res => {	
					  uni.setStorageSync('order', {
						num:res.data.res
					  })
					  this.num = res.data.res;
				},
				
			});
		},
		methods: {
			
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(this.date);
			},
			
		   bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			
			bindStoreChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.store = e.target.value
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			updata() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.phone1.length < 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号最短为 11个字符'
					});
					return;
				}
			
			
				uni.request({
					url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
					method: 'GET',
					data: {
						act:'order',
						phone:this.phone1,
						name:this.userName1,
						look:0,
						date:this.date,
						store:this.store,
						position:this.index
					},
					success: res => {	
						  // this.num = this.num - parseInt(res.data.count.c);
						  // let n = this.num
						  // console.log(n);
						  uni.setStorageSync('order', {
							num:res.data.res
						  })
						uni.showToast({
							title:res.data.msg
						});
						uni.reLaunch({
							url:'../my/my'
						})
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
body{
	background-color: #efeff4;
}
  .input-row .title {
	  width:170upx;
  }
 .content {
 	display: flex;
 	flex: 1;
 	flex-direction: column;
 	background-color: #efeff4;
 	padding: 10px;
 }
 .input-group {
 	background-color: #ffffff;
 	margin-top: 20px;
 	position: relative;
 }
 
 .input-group::before {
 	position: absolute;
 	right: 0;
 	top: 0;
 	left: 0;
 	height: 1px;
 	content: '';
 	-webkit-transform: scaleY(.5);
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
 
 .input-group::after {
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	left: 0;
 	height: 1px;
 	content: '';
 	-webkit-transform: scaleY(.5);
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
 
 .input-row {
 	display: flex;
 	flex-direction: row;
 	position: relative;
 	font-size: 18px;
 	line-height: 40px;
 }
 
 .input-row .title {
 	width: 72px;
 	padding-left: 15px;
 }
 
 .input-row.border::after {
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	left: 8px;
 	height: 1px;
 	content: '';
 	-webkit-transform: scaleY(.5);
 	transform: scaleY(.5);
 	background-color: #c8c7cc;
 }
 .btn-row{
	 margin-top: 100px;
 }
</style>
